<script lang="ts" setup>
import APublicForm from "@/components/antd/APublicForm.vue";
import { reactive } from "vue";
import { Rule } from "ant-design-vue/es/form";
import { UserOutlined } from "@ant-design/icons-vue";
import { AntdColumsType } from "#/antd-vue";

const form = reactive({
	input: "",
	selectRadio: "",
	selectCheckbox: [] as string[],
	switch: false,
	segmented: "",
	checkbox: [],
	radio: "",
	desc: "",
	cascader: "",
});

// 表单效验
const rules: Record<string, Rule[]> = {
	input: [
		{ required: true, message: "请输入input内容", trigger: "blur" },
		{ min: 3, max: 5, message: "input长度限制", trigger: "blur" },
	],
	selectRadio: [
		{
			required: true,
			message: "请输入select单选内容",
			trigger: "blur",
		},
	],
	selectCheckbox: [
		{
			required: true,
			message: "请输入select多选内容",
			trigger: "change",
		},
	],
	switch: [],
	segmented: [
		{
			required: true,
			message: "请输入分段控制器内容",
			trigger: "change",
		},
	],
	checkbox: [
		{
			type: "array",
			required: true,
			message: "请输入多选内容",
			trigger: "change",
		},
	],
	radio: [
		{
			required: true,
			message: "请输入单选内容",
			trigger: "change",
		},
	],
	desc: [{ required: true, message: "请输文本域内容", trigger: "blur" }],
	cascader: [
		{
			required: true,
			message: "请输入级联选择器内容",
			trigger: "change",
		},
	],
};

// // #region 表单用法
const formColums: AntdColumsType<typeof form>[] = [
	{
		type: "input",
		label: "input",
		name: "input",
		tooltip: {
			title: "请输入用户名",
		},
		payload: {
			type: "primary",
			placeholder: "请输入用户名",
			className: "!w-200",
		},
	},
	{
		type: "select",
		label: "select 单选",
		name: "selectRadio",
		payload: {
			type: "primary",
			placeholder: "请输入地址",
			className: "!w-120",
			options: [
				{
					label: "南京",
					children: [
						{ label: "栖霞区", value: "qx", id: "100" },
						{ label: "建邺区", value: "jy", id: "101" },
						{ label: "雨花台区", value: "yht", id: "102" },
					],
				},
				{ label: "北京", value: "2", id: "2", children: [] },
				{ label: "上海", value: "3", id: "3", children: [] },
			],
		},
	},
	{
		type: "select",
		label: "select 多选",
		name: "selectCheckbox",
		payload: {
			mode: "multiple",
			type: "primary",
			placeholder: "请输入地址",
			className: "!w-200",
			maxTagTextLength: 1,
			options: [
				{
					label: "南京",
					icon: UserOutlined,
					children: [
						{ label: "lkajdsf", value: "qx", id: "100" },
						{ label: "建邺区", value: "jy", id: "101" },
						{ label: "雨花台区", value: "yht", id: "102" },
					],
				},
				{ label: "北京", value: "2", id: "2" },
				{ label: "上海", value: "3", id: "3" },
			],
		},
	},
	{
		type: "switch",
		label: "switch 开关",
		name: "switch",
		payload: {
			type: "primary",
		},
	},
	{
		type: "segmented",
		label: "segmented 分段控制器",
		name: "segmented",
		payload: {
			options: [
				{
					label: "用户1",
					value: "user1",
				},
				{
					label: "用户2",
					value: "user2",
				},
				{
					label: "用户3",
					value: "user3",
				},
			],
		},
	},
	{
		type: "checkbox",
		label: "checkbox 多选",
		name: "checkbox",
		payload: {
			type: "primary",
			placeholder: "请输入地址",
			className: "!w-120",
			// size: "small",
			options: [
				{ label: "南京", value: "1", id: "1" },
				{ label: "北京", value: "2", id: "2" },
				{ label: "上海", value: "3", id: "3" },
			],
		},
	},
	{
		type: "radio",
		label: "radio 单选",
		name: "radio",
		payload: {
			type: "primary",
			placeholder: "请输入地址",
			className: "!w-120",
			// size: "small",
			options: [
				{ label: "南京", value: "1", id: "1" },
				{ label: "北京", value: "2", id: "2" },
				{ label: "上海", value: "3", id: "3" },
			],
		},
	},
	{
		type: "textarea",
		label: "desc",
		name: "desc",
		payload: {
			className: "!w-120",
			type: "textarea",
			placeholder: "请输入用户名",
			showCount: true,
		},
	},
	{
		type: "cascader",
		label: "cascader 级联选择器",
		name: "cascader",
		payload: {
			multiple: true,
			placeholder: "请输入地址",
			className: "!w-200",
			options: [
				{
					value: "zhejiang",
					label: "Zhejiang",
					children: [
						{
							value: "hangzhou",
							label: "Hangzhou",
							children: [
								{
									value: "xihu",
									label: "West Lake",
								},
							],
						},
					],
				},
				{
					value: "jiangsu",
					label: "Jiangsu",
					children: [
						{
							value: "nanjing",
							label: "Nanjing",
							children: [
								{
									value: "zhonghuamen",
									label: "Zhong Hua Men",
								},
							],
						},
					],
				},
			],
		},
	},
	{
		type: "button",
		payload: {
			buttonlist: ["submit", "reset"],
		},
	},
];
// // #endregion

// #region 筛选用法 class="inline-flex gap-10"
// const formColums: AntdColumsType<typeof form>[] = [
// 	{
// 		type: "input",
// 		name: "input",
// 		tooltip: {
// 			title: "请输入用户名",
// 		},
// 		payload: {
// 			type: "primary",
// 			placeholder: "请输入用户名",
// 			className: "!w-200",
//
// 		},
// 	},
// 	{
// 		type: "select",
// 		tooltip: {
// 			title: "select 单选",
// 		},
// 		name: "selectRadio",
// 		payload: {
// 			type: "primary",
// 			placeholder: "请输入地址",
// 			className: "!w-120",
//
// 			// size: "small",
// 			options: [
// 				{
// 					label: "南京",
// 					children: [
// 						{ label: "栖霞区", value: "qx", id: "100" },
// 						{ label: "建邺区", value: "jy", id: "101" },
// 						{ label: "雨花台区", value: "yht", id: "102" },
// 					],
// 				},
// 				{ label: "北京", value: "2", id: "2", children: [] },
// 				{ label: "上海", value: "3", id: "3", children: [] },
// 			],
// 		},
// 	},
// 	{
// 		type: "select",
// 		tooltip: {
// 			title: "select 多选",
// 		},
// 		name: "selectCheckbox",
// 		payload: {
// 			mode: "multiple",
// 			type: "primary",
// 			placeholder: "请输入地址",
// 			className: "!w-200",
//
// 			// size: "small",
// 			maxTagTextLength: 1,
// 			options: [
// 				{
// 					label: "南京",
// 					children: [
// 						{ label: "lkajdsf", value: "qx", id: "100" },
// 						{ label: "建邺区", value: "jy", id: "101" },
// 						{ label: "雨花台区", value: "yht", id: "102" },
// 					],
// 				},
// 				{ label: "北京", value: "2", id: "2" },
// 				{ label: "上海", value: "3", id: "3" },
// 			],
// 		},
// 	},
// ];
// #endregion
</script>

<template>
	<div class="p-10">
		<APublicForm v-model:form="form" :formColums="formColums" :rules="rules" />
	</div>
</template>

<style scoped></style>
